{include file='header'/}
<body>
<form class="layui-form" action="javascript:;" onsubmit="return dosub(this)">
    <div class="mainBox">
        <div class="main-container layui-container">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本选项</li>
                    <li>高级选项</li>
                    <li>扩展字段</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <!--基本选项-->
                        <div class="layui-form-item">
                            <label class="layui-form-label required">所属模型</label>
                            <div class="layui-input-block">
                                <select name="model_id" lay-verify="required" lay-filter="model_id">
                                    <option value="">请选择模型</option>
                                    <?php
                        foreach($modelsIdList as $key=>$v){
                                    ?>
                                    <option value="<?php echo $v['id'] ?>"
                                    <?php if($v['id'] == $model_id) echo "selected"; ?>
                                    ><?php echo $v['name'] ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">父栏目</label>
                            <div class="layui-input-block">
                                <select name="pid" lay-verify="required" style="width:300px;">
                                    <option value="">请选择父栏目</option>
                                    {volist name="cates" id="vo"}
                                    <option value="{$vo.id}">{$vo.name|raw}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">栏目名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-verify="required"
                                       autocomplete="off" placeholder="请输入栏目名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">目录名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="dirname" lay-verify="dirname"
                                       autocomplete="off" value="" placeholder="留空则默认：拼音+随机数"
                                       class="layui-input">
                            </div>
                            <tip>用于地址栏访问的名称，支持字母,数字,-,_</tip>
                        </div>
                        <div class="layui-form-item tpl_select" id="index_tpl">
                            <label class="layui-form-label required">栏目模板</label>
                            <div class="layui-input-block">
                                <select name="index_tpl" lay-verify="required"></select>
                            </div>
                        </div>
                        <div class="layui-form-item tpl_select" id="list_tpl">
                            <label class="layui-form-label">列表模板</label>
                            <div class="layui-input-block">
                                <select name="list_tpl" lay-verify="required"></select>
                            </div>
                        </div>
                        <div class="layui-form-item tpl_select" id="show_tpl">
                            <label class="layui-form-label">内容模板</label>
                            <div class="layui-input-block">
                                <select name="show_tpl" lay-verify="required"></select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="status" value="1" title="启用" checked>
                                <input type="radio" name="status" value="0" title="禁用">
                            </div>
                        </div>

                    </div>
                    <div class="layui-tab-item">
                        <!--高级选项-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">栏目图片</label>
                            <div class="layui-input-block huicmf-upload">
                                <input type="text" name="image" value=""
                                      id="thumb-select-input" autocomplete="off" class="layui-input">
                                <button type="button" class="layui-btn layui-btn-normal layUpload" id="picker_pic2"
                                        data-multiple="false" data-input-id="thumb-select-input"
                                        data-preview-id="thumb" data-type="image"><i class="layui-icon"></i>上传图片
                                </button>
                                <button type="button" class="layui-btn ml-10"
                                        data-open-pic="{:url('upload_file/index',['type'=>'one','select_id'=>'thumb-select-input'])}">
                                    <i class="layui-icon"></i>选择图片
                                </button>
                            </div>
                            <div class="layui-form-label"></div>
                            <div class="layui-input-inline">
                                <div id="thumb-select-input_box" class="pic_box"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="seo_title"
                                       autocomplete="off" placeholder="请输入SEO标题" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO关键字</label>
                            <div class="layui-input-block">
                                <input type="text" name="seo_keywords"
                                       autocomplete="off" placeholder="请输入SEO关键字" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO描述</label>
                            <div class="layui-input-block">
                                <textarea name="seo_desc" class="layui-textarea" autocomplete="off"
                                          placeholder="请输入SEO描述"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">跳转链接</label>
                            <div class="layui-input-block">
                                <input type="text" name="link" lay-verify="url"
                                       autocomplete="off" placeholder="请输入跳转链接" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">打开方式</label>
                            <div class="layui-input-block">
                                <input type="radio" name="target" value="_self"
                                       title="本窗口打开" checked>
                                <input type="radio" name="target" value="_blank"
                                       title="新窗口打开">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-block">
                                <input type="text" name="sort"
                                       autocomplete="off" placeholder="请输入排序" value="255" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <!--扩展字段-->

                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="admin-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>

{include file='footer'/}
<script>
  layui.use(['form', 'jquery'], function () {
    let form = layui.form;
    let $ = layui.jquery;
    form.verify({
      dirname: function (value, item) {
        if(value.length>0){
          if (!new RegExp("^[a-zA-Z0-9-_]+$").test(value)) {
            return '目录名称只支持字母,数字,-,_';
          }
          if (/^\d+\d+\d$/.test(value)) {
            return '目录名称不能全为数字';
          }
        }
      }
    });
    form.on('select(model_id)', function (data) {
      $.post("{:url('category/tpl_name')}", {model_id: data.value}, function (res) {
        if (res.code === 200) {
          str = '';
          $.each(res.data, function (index, item) {
            str += ("<option value='" + item + "'>" + item + "</option>");
          })
          $('.tpl_select').find('select').html(str);
          form.render();
        }
      })
    });
    form.render();

    window.dosub = function (obj) {
      var loading = layer.load(2);
      $.ajax({
        url: "{:url('category/add')}",
        data: $(obj).serialize(),
        dataType: 'json',
        type: 'post',
        success: function (res) {
          layer.close(loading);
          if (res.code === 200) {
            hui_msg(res.msg, 1, function () {
              var pageId = parent.layer.getFrameIndex(window.name);
              parent.layer.close(pageId);
            });
          } else {
            hui_msg(res.msg, 2);
          }
        }
      })
      return false;
    }
  })
</script>
</body>
</html>
